<template>
  <div>
    <h1>{{ msg }}</h1>
    <div>
      <div>苹果10元 一斤，八折</div>
      <div>
        请输入几斤：
        <input type="number" v-model="jin" step="1" min="1" max="100" />
      </div>
      <div>
        <button @click="suan">结账</button>
      </div>
      <div>结账单：总价{{ zong }}。折扣价：{{ zheko }} 。省了 {{ sheng }}元。</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "欢迎.........",
      jin: 0,
      zong: 0,
      zheko: 0,
      sheng: 0
    };
  },
  methods: {
    suan(){
      this.zong = this.jin * 10
      this.zheko = this.zong * 0.8
      this.sheng = this.zong - this.zheko
    }
  },
};
</script>

<style>
body {
  text-align: center;
}
</style>